<template>
  <a-form-model-item
    :label="label"
    :prop="name ? name : prop"
    :rules="rules"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
  >
    <a-tree-select
      class="readonlySelect"
      v-if="readonly"
      v-model="value"
      :tree-data="treeData"
      :replaceFields="replaceFields"
      disabled
      :placeholder="placeholder"
      style="width: 100%;background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;"
    >
    </a-tree-select>
    <a-tree-select
      v-else
      v-model="value"
      :tree-data="treeData"
      :replaceFields="replaceFields"
      :tree-checkable="checkable"
      style="width: 100%"
      :show-search="search"
      :treeNodeFilterProp="treeNodeFilterProp"
      :disabled="disabled"
      :placeholder="placeholder"
      @change="handleChange"
      @select="handleSelect"
    >
    </a-tree-select>
  </a-form-model-item>
</template>

<script>
export default {
  name: 'ResealSelect',
  props: {
    // 绑定的对象
    form: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 绑定对象的属性
    prop: {
      type: String,
      default: 'attribute'
    },
    // 循环中使用的检验值
    name: {
      type: String,
      default: ''
    },
    // 循环中使用的检验规则
    rules: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // label格数
    labelCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // input格数
    wrapperCol: {
      type: Object,
      default: () => {
        return null;
      }
    },
    // 选择字典
    treeData: {
      type: Array,
      default: () => {
        return [
        // {
        //   title: 'parent 1',
        //   value: 'parent 1',
        //   children: [
        //     {
        //       title: 'parent 1-0',
        //       value: 'parent 1-0',
        //       children: [
        //         {
        //           title: 'my leaf',
        //           value: 'leaf1'
        //         },
        //         {
        //           title: 'your leaf',
        //           value: 'leaf2'
        //         }
        //       ]
        //     },
        //     {
        //       title: 'parent 1-1',
        //       value: 'parent 1-1'
        //     }
        //   ]
        // }
        ];
      }
    },
    // 映射children，title,value,key字段
    replaceFields: {
      type: Object,
      default: () => {
        return {
          children: 'chrildens', label: 'name', key: 'code', value: 'id'
        };
      }
    },
    // 搜索属性
    treeNodeFilterProp: {
      type: String,
      default: 'title'
    },
    // 文字
    label: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    // 勾选模式
    checkable: {
      type: Boolean,
      default: false
    },
    // 可输入搜索
    search: {
      type: Boolean,
      default: true
    },
    // 禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 只读
    readonly: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    parentData: function() {
      const arr = this.prop.split('.');
      const key = arr[arr.length - 1];
      return this.analysisAttribute(this.form)[key];
    }
  },
  watch: {
    parentData: {
      handler: function(n) {
        this.value = n;
      },
      immediate: true
    }
  },
  data() {
    return {
      value: ''
    };
  },
  mounted() {
    // 测试修改属性
    // console.log(this.analysisAttribute(this.form, 100));
  },
  methods: {
    handleChange(e) {
      this.$emit('change', e);
      this.analysisAttribute(this.form, e);
    },
    handleSelect(value, node, extray){
      let curItem = extray.selectedNodes[0].data.props;
      this.$emit('select', curItem);
    },
    /**
     * [analysisAttribute 根据字符串获取末级对象]
     * @param  {[type]} object [读取的对象]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    analysisAttribute(object, val) {
      var arr = this.prop.split('.');
      let index = 0;
      const length = arr.length;
      while (object != null && index < length - 1) {
        object = object[arr[index]];
        index++;
      }
      if (val || val === 0) {
        object[arr[index++]] = val;
      } else {
        return object;
      }
    }
  }
};
</script>
<style>
  .ant-select-dropdown-content{
    max-height: 300px;
    overflow-y: auto;
  }
  .readonlySelect .ant-select-selection{
    background-color:#fff;color: rgba(0, 0, 0, 0.65);cursor: auto;
  }
</style>
